<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="/common/head::head('广告机 - 广告机管理后台')"/>
    <script type="text/javascript" src="../../../static/application/js/echarts.min.js"></script>
    <style type="text/css">
        .weatherUl{
            width:700px;
            height:50px;
            list-style: none;
            margin:0;
            padding:0;
        }
        .weatherUl li{
            width:120px;
            margin:0 10px;
            float: left;/*该处换为display:inline-block;同样效果*/

        }
        .weatherUl li a{
            width:70px;
            height:50px;
            padding:0 20px;
            font-size: 12px;
            line-height:50px;
            background: red;
            display: inline-block;
        }
    </style>
</head>
<!--/* <editor-fold desc="define"> */-->
<!--/*@thymesVar id="loginUser" type="com.xmlan.machine.module.user.entity.User"*/-->
<!--/*@thymesVar id="adminPath" type="java.lang.String"*/-->
<!--/*@thymesVar id="page" type="com.github.pagehelper.PageInfo<com.xmlan.machine.module.advertisementMachine.entity.AdvertisementMachine>"*/-->
<!--/*@thymesVar id="adCount" type="java.util.List<com.xmlan.machine.module.advertisement.entity.AdvertisementCount>"*/-->
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<!--/*@thymesVar id="codeNumber" type="java.lang.String"*/-->
<!--/*@thymesVar id="addTime" type="java.lang.String"*/-->
<!--/*@thymesVar id="deleteToken" type="java.lang.String"*/-->
<!--/*@thymesVar id="open" type="java.lang.String"*/-->
<!--/* </editor-fold> */-->
<body>
<th:block th:include="/common/header::header('atmosphere')"/>
<main style="z-index: 0;">
    <div class="page-title z-depth-1 blue-grey darken-2">
        <div class="white-text">
          <span class="flow-text">
            <a class="btn-flat"><i class="material-icons white-text">list</i></a>大气数据采集列表
          </span>
        </div>
    </div>
    <br/>
    <div id="main-content" style="height: 700px" class="container">
        <table class="highlight responsive-table" >
            <thead>
            <tr>
                <th>名称</th>
                <th>地址</th>
                <th>查看大气数据采集</th>
            </tr>
            </thead>
            <tbody class="card">
                <tr th:each="item:${page.list}">
                    <td th:text="*{item.name}">name</td>
                    <td th:text="*{#strings.abbreviate(item.addrStr,30)}">address</td>
                    <td ><a class="btn-floating blue waves-effect waves-light tooltipped btn modal-trigger"
                            data-position="top" data-delay="50" data-tooltip="大气采集" href="#weather-modal"
                            th:onmouseover="'javascript:weather(\''+*{item.id}+'\')'">查看</a></td>
                </tr>
            </tbody>
        </table>
        <div id="pagination-div" class="center">
            <ul class="pagination">
                <li th:if="${!page.hasPreviousPage}" class="disabled">
                    <a href="#"><i class="material-icons">chevron_left</i></a>
                </li>
                <li th:if="${page.hasPreviousPage}" class="waves-effect">
                    <a th:href="@{${adminPath}+'/atmosphere/list/'+${page.prePage}}"><i
                            class="material-icons">chevron_left</i></a>
                </li>
                <th:block th:each="number:${page.navigatepageNums}">
                    <li th:if="${number==page.pageNum}" class="waves-effect" id="active-page">
                        <a href="#" th:text="${number}"></a>
                    </li>
                    <li th:if="${number!=page.pageNum}" class="waves-effect">
                        <a th:href="@{${adminPath}+'/atmosphere/list/'+${number}}"
                           th:text="${number}"></a>
                    </li>
                </th:block>
                <li th:if="${!page.hasNextPage}" class="disabled">
                    <a href="#"><i class="material-icons">chevron_right</i></a>
                </li>
                <li th:if="${page.hasNextPage}" class="waves-effect">
                    <a th:href="@{${adminPath}+'/atmosphere/list/'+${page.nextPage}}"><i
                            class="material-icons">chevron_right</i></a>
                </li>
            </ul>
        </div>
    </div>

    <div id="weather-modal" style="height: 500px;width: 500px" class="modal modal-fixed-footer">
    </div>
</main>
<th:block th:include="/common/footer::footer"/>
<th:block th:include="/common/script::script"/>
<script type="text/javascript">
    $(function () {
        $("#weather-modal").modal();
        toast('[[${message}]]');
    })
    function weather(id) {
        var url = '[[${adminPath}]]/advertisementMachine/weather/' + id;
        $.ajax({
            url:url,
            type:"GET",
            success:function (data) {
                var id = data['weather'].id;
                var temperature = data['weather'].temperature;
                var brightness = data['weather'].brightness;
                var pm25 = data['weather'].pm25;
                var humidity = data['weather'].humidity;
                var dom = document.getElementById("weather-modal");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    title: {
                        text:'id为'+id+ '号设备大气数据信息柱状显示图',
                        x: '10',
                        y: '10',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 24,
                            color: "blue",
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['温度', '湿度', '空气污染指数', '亮度']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                // formatter: '{c},({d}%)'//多值的嵌套
                            }
                        },
                        data: [temperature, brightness, pm25, humidity],
                        type: 'bar'
                    }]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            },error:function () {
            }
        });
    }
</script>
</body>
</html>
